<template>
  <div class="early-warning-statistics-box">
    <div class="header">
      <span class="header-text">今日预警统计</span>
      <router-link :to="{ path: '/warning/record' }">
        <el-button size="mini" class="header-btn">告警记录</el-button>
      </router-link>
    </div>
    <div class="content">
      <div class="content-item">
        <div class="content-value" style="color: #000000">
          <count-to
            :start-val="0"
            :end-val="
              warningStatisticsData.totalCount == null
                ? 0
                : warningStatisticsData.totalCount
            "
            :duration="3000"
            separator=""
          />
        </div>
        <div class="content-label">总计</div>
      </div>
      <div class="content-item">
        <div class="content-value" style="color: #f50707">
          <count-to
            :start-val="0"
            :end-val="
              warningStatisticsData.fireCount == null
                ? 0
                : warningStatisticsData.fireCount
            "
            :duration="3000"
            separator=""
          />
        </div>
        <div class="content-label">报警</div>
      </div>
      <div class="content-item">
        <div class="content-value" style="color: #ff6006">
          <count-to
            :start-val="0"
            :end-val="
              (warningStatisticsData.totalCount == null
                ? 0
                : warningStatisticsData.totalCount) -
              (warningStatisticsData.fireCount == null
                ? 0
                : warningStatisticsData.fireCount)
            "
            :duration="3000"
            separator=""
          />
        </div>
        <div class="content-label">
          异常
          <el-tooltip
            class="item"
            effect="dark"
            content="异常=故障+隔离+离线+反馈+启动"
            placement="top"
          >
            <i
              class="el-icon-question"
              style="color: rgb(255, 153, 0); cursor: pointer"
            ></i>
          </el-tooltip>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CountTo from 'vue-count-to'
export default {
  name: 'EarlyWarningStatistics',
  components: {
    CountTo,
  },
  props: {
    warningStatisticsData: {
      type: Object,
      default: () => {
        return {}
      },
    },
  },
}
</script>
<style lang="scss" scoped>
.early-warning-statistics-box {
  position: absolute;
  top: 0.8vh;
  right: 0.5vw;
  width: 350px;
  height: 120px;
  background-color: #fff;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.1);
  border-radius: 2px;
  opacity: 0.8;
  .header {
    padding: 10px 5px 15px 15px;
    border-bottom: 1px solid rgb(241, 241, 241);
  }
  .header-text {
    font-weight: bold;
    color: #000000;
  }
  .header-btn {
    padding: 6px 12px;
    float: right;
  }
  .content {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 55%;
    align-items: center;
  }
  .content-item {
    display: flex;
    flex-direction: column;
    flex: 1;
    align-items: center;
  }
  .content-value {
    font-weight: 500;
    font-size: 30px;
  }
  .content-label {
    font-weight: 400;
    color: #000000;
    font-size: 13px;
    margin-top: 3px;
  }
}
</style>
